<template>
  <div style="margin-top: 10px">
    <el-row>
      <el-carousel :interval="5000" arrow="always" type="card">
        <el-carousel-item>
          <img src="@/assets/carousel/1.png" class="carousel-img" />
        </el-carousel-item>
        <el-carousel-item>
          <img src="@/assets/carousel/2.png" class="carousel-img" />
        </el-carousel-item>
        <el-carousel-item>
          <img src="@/assets/carousel/3.png" class="carousel-img" />
        </el-carousel-item>
        <el-carousel-item>
          <img src="@/assets/carousel/4.png" class="carousel-img" />
        </el-carousel-item>
      </el-carousel>
    </el-row>
    <el-row class="app-item-contain">
      <h3 class="index-title-h3">未做试卷</h3>
      <div style="padding-left: 15px" class="contain">
        <div
          :span="4"
          v-for="(item, index) in unfinishedPaper"
          :key="index"
          :offset="index > 0 ? 1 : 0"
          class="contain-item"
        >
          <el-card :body-style="{ padding: '0px' }" v-loading="loading">
            <p class="title">{{ item.name }}</p>
            <img src="@/assets/exam-paper/show1.png" class="image" />
            <div style="padding: 14px;">
              <div class="count">
                <span>{{ item.course_name }}</span>
                <span>题目数量：{{ item.problem_count }}</span>
              </div>

              <div class="bottom clearfix">
                <span
                  >时间：{{
                    item.create_time | parseTime('{m}-{d} {h}点')
                  }}</span
                >
                <!--  target="_blank" -->
                <router-link :to="{ path: '/do', query: { id: item.id } }">
                  <el-button type="text" class="button">开始做题</el-button>
                </router-link>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </el-row>
    <el-row class="app-item-contain">
      <h3
        class="index-title-h3"
        style="border-left: solid 10px rgb(220, 208, 65);"
      >
        已做试卷
      </h3>
      <div style="padding-left: 15px" class="contain">
        <div
          :span="4"
          v-for="(item, index) in finishedPaper"
          :key="index"
          :offset="index > 0 ? 1 : 0"
          class="contain-item"
        >
          <el-card :body-style="{ padding: '0px' }" v-loading="loading1">
            <!-- 分数 -->
            <!-- <img src="@/assets/exam-paper/show2.png" class="image" /> -->
            <div class="grade_box">
              <span class="grade">{{ item.grade }}</span>
              <div class="line"></div>
            </div>
            <div style="padding: 14px;">
              <span>{{ item.name }}</span>
              <div class="bottom clearfix">
                <!-- target="_blank" -->
                <router-link :to="{ path: '/read', query: { id: item.id } }">
                  <el-button type="text" class="button">查看详情</el-button>
                </router-link>
              </div>
              <p class="index-limit-paper-time">
                <span>{{ item.start_time | parseTime }}</span>
                <br />
                <span>{{ item.end_time | parseTime }}</span>
              </p>
            </div>
          </el-card>
        </div>
      </div>
    </el-row>
  </div>
</template>

<script>
import {
  finishedExamPaperListInfo,
  unfinishedExamPaperListInfo
} from '@/api/exam-paper'
export default {
  data () {
    return {
      unfinishedPaper: [
        // {
        //   name: "试卷1",
        //   start_time: "",
        //   end_time: "",
        //   garade: 0,
        //   id: "2"
        // },
        // {
        //   name: "试卷2",
        //   id: "3"
        // }
      ],
      finishedPaper: [
        // {
        //   name: "试卷1",
        //   id: "2",
        //   startTime: "asdfas",
        //   endTime: "asdljkf"
        // }
        // {
        //   name: "试卷2",
        //   id: "3",
        //   startTime: "asdfas",
        //   endTime: "asdljkf"
        // }
      ],
      pushPaper: [],
      loading: false,
      loading1: false
    }
  },
  created () {
    // let _this = this
    // this.loading = true
    // indexApi.index().then(re => {
    //   _this.fixedPaper = re.response.fixedPaper
    //   _this.timeLimitPaper = re.response.timeLimitPaper
    //   _this.pushPaper = re.response.pushPaper
    //   _this.loading = false
    // })
    let _this = this
    this.loading = true
    finishedExamPaperListInfo().then(res => {
      this.finishedPaper = res.data.items
      _this.loading = false
      console.log(res)
    })
    this.loading1 = true
    unfinishedExamPaperListInfo().then(res => {
      this.unfinishedPaper = res.data.items
      _this.loading1 = false
      console.log(res)
    })
  },
  methods: {
    getWaitFindsh () {}
  }
}
</script>

<style lang="scss" scoped>
.index-title-h3 {
  font-size: 22px;
  font-weight: 400;
  color: #1f2f3d;
  border-left: solid 10px #2ce8b4;
  padding-left: 10px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 50%;
  height: 80%;
  display: block;
  margin: 20px auto 10px auto;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}

.clearfix:after {
  clear: both;
}
.grade_box {
  width: 120px;
  height: 140px;
  border: 6px solid #888;
  border-radius: 10px;
  margin: 20px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  .grade {
    font-size: 40px;
    font-weight: 700;
    color: #888;
    margin-top: 10px;
  }
  .line {
    &::before,
    &::after {
      content: '';
      display: block;
      width: 70px;
      height: 8px;
      background-color: #888;
      margin-top: 15px;
    }
    &::after {
      width: 40px;
    }
  }
}
.title {
  text-align: center;
}
.count {
  display: flex;
  justify-content: space-between;
}
.contain {
  max-width: 1680px;
  display: flex;
  flex-wrap: wrap;

  .contain-item {
    flex-shrink: 0;
    width: 280px;
    margin: 0 30px 30px 0;
  }
}
</style>
